<template>
	<div id="home">
		<h2>{{info.title}}</h2>
		<p class="title"><span class="left">{{info.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span><span class="right">{{info.click}}次浏览</span></p>
		<hr />
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) in list" :key='index'>
				<img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)">
			</li>
		</ul>
		<p class="content" v-html="info.content"></p>
		<comment :artid='imgid'></comment>
	</div>
</template>

<script>
	import comment from '../subcom/comment.vue';
	export default {
		components: {
			comment
		},
		data() {
			return {
				info: '',
				imgid: 0,
				list: []
			}
		},
		created() {
			this.imgid = this.$route.params.id;
			this.getImgInfo();
			this.getthumimages();
		},
		methods: {
			getImgInfo() {
				this.$http.get(this.$common.domain + '/api/getimageInfo/' + this.imgid).then(function(res) {
					var body = res.body;
					if(body.status != 0) {
						Toast(res.body.message);
						return;
					}
					this.info = body.message[0];
				});
			},
			getthumimages() {
				this.$http.get(this.$common.domain + '/api/getthumimages/' + this.imgid).then(function(res) {
					var body = res.body;
					if(body.status != 0) {
						Toast(res.body.message);
						return;
					}
					body.message.forEach(function(item) {
						var img = new Image();
						item.src = 'http://182.254.146.100:8080/' + item.src
						img.src = item.src;
						item.h = img.height;
						item.w = img.width;
					})
					this.list = body.message;
				});
			}
		}
	}
</script>

<style scoped>
	#home {
		padding: 10px;
	}
	
	h2 {
		margin-top: 20px;
		font-size: 20px;
		color: deepskyblue;
	}
	
	.title .left {
		margin-right: 20px;
	}
	
	.mui-grid-view.mui-grid-9 {
		background-color: white;
		border: none;
	}
	
	.mui-grid-view.mui-grid-9 img {
		width: 100%;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: none;
	}
</style>